import { AppStore } from './../../services/appStore';
import { PageBase } from 'app/base';
import { NavigateService } from './../../services/navigate';
import { YScrollableContainer } from './../../components/y-scrollable-container';
import { Order } from './../../models/order';
import { Component, OnInit, Input, ElementRef, ChangeDetectorRef, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'suspended-orders',
    styleUrls: ['./index.scss'],
    template: `
        <div class="pct-h100 layout-column">
            <div class="order_box suspende_orders_container">
                <div class="top">
                    <span class="order_title">{{_zoneName ? ("相同分区订单"):(title+" / "+currentOrders.length+"单")}}</span>
                </div>
                <div class="content">
                    <div class="content_detail">
                        <div *ngIf="currentOrders.length==0" class="center">没有订单</div>
                        <y-scrollable-container (change)="PagingMeaageChange($event)">
                            <div *ngFor="let order of currentOrders;trackBy:trackById" [ngClass]="{'new_finished_suspended_orders':isFinishPage}">
                                <suspended-order   (click)="onViewDetails(order.id)" routerLinkActive="active"
                                [order]="order" [orderId]="order.id" item [selected]="selectId==order.id" [isFinishPage]="isFinishPage"                             
                                ></suspended-order>
                            </div>  
                        </y-scrollable-container>
                    </div>                
                    <div class="bottom" *ngIf="pagingInfo&&pagingInfo.previousCount || pagingInfo&&pagingInfo.nextCount">
                        <page-btn [btnType]="'up-down'" [upNum]="pagingInfo&&pagingInfo.previousCount" [downNum]="pagingInfo&&pagingInfo.nextCount" (onUp)="up()" (onDown)="down()"></page-btn>
                    </div>
                </div>
            </div>            
        </div>
    `
})
export class SuspendedOrders extends PageBase implements OnInit {
    _zoneName:string
    @Input() 
    set zoneName(zoneName:string){
        this._zoneName = zoneName;
        this.change();
    }

    @Input() title: string;
    @Input() customizedClass: string;
    @Input() isFinishPage: boolean;
    
    @ViewChild(YScrollableContainer)
    private yScrollableContainer: YScrollableContainer;

    currentOrders:Array<Order>

    _orders:Array<Order>

    pagingInfo: {
        previousCount: number, nextCount: number, turningPage(count)
    }

    selectId: string;

    change(){
        this.currentOrders = (this._orders||[]).filter(order=>!this._zoneName || (order.extended&&order.extended.table&&order.extended.table.zone&&order.extended.table.zone.name)==this._zoneName);
        this.changeDetectorRef.detectChanges();
        this.yScrollableContainer&&this.yScrollableContainer.childrenChanged();
    }

    @Input()
    set orders(orders: Array<any>) {
        this._orders = orders || [];
        this.change();
    }

    PagingMeaageChange(event) {
        this.pagingInfo = event;
    }

    constructor(private appStore: AppStore,private activeRouter: ActivatedRoute, private navSvr: NavigateService, private element: ElementRef, private changeDetectorRef: ChangeDetectorRef, private router: Router, private route: ActivatedRoute) {
        super();
    }

    ngOnInit() {
        const paramsId$ = this.activeRouter.params.map(params => params["id"]);
        this.subscribetions.push(paramsId$.subscribe(id => {
            this.selectId = id;
        }))
        this.navSvr.registerRoute(this.route);
    }

    private up() {
        this.pagingInfo.turningPage(-1);
    }

    private down() {
        this.pagingInfo.turningPage(1);
    }

    ngAfterViewInit() {

    }

    private trackById(index: number, order: any) {
        return order.id;
    }

    async onViewDetails(id) {
        await this.appStore.orderStore.actions.closeOrder();
        this.navSvr.onViewDetails(id);
        // this.router.navigate(["../" + id], { relativeTo: this.route });
    }

    navigatSecendView(){
        if(!(this.currentOrders&&this.currentOrders[1])){
            return;
        }
        this.onViewDetails(this.currentOrders[1].id);
    }

    navigatFirstView(){
        if(!(this.currentOrders&&this.currentOrders[0])){
            return;
        }
        this.onViewDetails(this.currentOrders[0].id);
    }
}